<script setup lang="ts">

import { onMounted, reactive, ref } from 'vue'
import type { PageInfo, Result } from '@/tools/request'
import { Message, Modal } from '@arco-design/web-vue'
import type { SysUser } from '@/api/system/sysUser/sysUser.d'
import {
  sysUserAdd,
  sysUserById, sysUserList,
  sysUserModify,
  sysUserRemove, sysUserRemoveBatch
} from '@/api/system/sysUser/sysUser'
import { useGlobalStore } from '@/stores/global'

//表单部分
const sysUserFormRef = ref()
const sysUserForm = reactive({
  //搜索表单
  query: {} as SysUser,
  submitQuery: () => {
    sysUserList(sysUserForm.query, {
      pageNum: sysUserTable.pageInfo.pageNum,
      pageSize: sysUserTable.pageInfo.pageSize
      //@ts-ignore
    }).then((resp: Result<PageInfo<SysUser>>) => {
        sysUserTable.pageInfo = resp.data
      }
    )
  },
  //新增修改表单
  form: {
    id: null,
    createTime: null,
    updateTime: null,
    createBy: null,
    delBy: null,
    del: null,
    remark: null,
    username: null,
    password: null,
    nickName: null,
    age: null,
    cardId: null,
    addr: null,
    phone: null,
    role: null
  } as SysUser,
  submitForm: ({ values, errors }: any) => {
    if (errors) return
    //修改
    if (sysUserForm.form.id) {
      sysUserModify(sysUserForm.form).then(() => {
        Message.success('修改系统用户成功')
        sysUserForm.visible = false
        sysUserForm.submitQuery()
      })
      return
    }
    //新增
    sysUserAdd(sysUserForm.form).then(() => {
      Message.success('新建系统用户成功')
      sysUserForm.visible = false
      sysUserForm.submitQuery()
    })
  },
  //弹出层title
  formTitle: '新增系统用户',
  //是否显示新增修改表单
  visible: false
})

const sysUserTable = reactive({
  pageInfo: {} as PageInfo<SysUser>,
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  },
  getList: () => {
    sysUserList(sysUserForm.query, {
      pageNum: sysUserTable.pageInfo.pageNum,
      pageSize: sysUserTable.pageInfo.pageSize
      //@ts-ignore
    }).then((resp: Result<PageInfo<SysUserTable>>) => {
      sysUserTable.pageInfo = resp.data
    })
  },
  selectKeys: [] as string[],
  batchDelete: () => {
    Modal.confirm({
      title: '警告',
      content: `确认删除系统用户【${sysUserTable.selectKeys}】吗？`,
      onOk(e) {
        sysUserRemoveBatch(sysUserTable.selectKeys!).then(() => {
          Message.success(`批量删除系统用户成功`)
          sysUserForm.submitQuery()
        })
      }
    })
  },
  add: () => {
    //新增系统用户
    sysUserFormRef.value!.resetFields()
    sysUserForm.formTitle = '新增系统用户'
    sysUserForm.visible = true
    sysUserForm.form.id = null
  },
  edit: (sysUser: SysUser) => {
    //编辑系统用户
    sysUserFormRef.value!.resetFields()
    sysUserForm.formTitle = '修改系统用户'
    sysUserForm.visible = true
    //@ts-ignore
    sysUserById(sysUser.id!).then((resp: Result<SysUser>) => {
      sysUserForm.form = resp.data
      sysUserForm.form.password = ''
    })
  },
  delete: (sysUser: SysUser) => {
    //删除系统用户
    Modal.confirm({
      title: '警告！',
      content: `确认删除系统用户【${sysUser.id}】吗？`,
      onOk(e) {
        sysUserRemove(sysUser.id!).then(() => {
          Message.success(`删除系统用户【${sysUser.id}】成功`)
          sysUserForm.submitQuery()
        })
      }
    })
  }
})

onMounted(() => {
  sysUserForm.submitQuery()
})

const globalStore = useGlobalStore()
const sysRoles = globalStore.cache.sysDatabaseCache.sysRole
</script>

<template>
  <a-breadcrumb class="my-3">
    <a-breadcrumb-item>系统管理</a-breadcrumb-item>
    <a-breadcrumb-item>用户管理</a-breadcrumb-item>
  </a-breadcrumb>
  <a-layout-content>
    <a-card>
      <template #title>
        用户管理
      </template>

      <a-space class="my-3">
        <a-button type="primary" @click="sysUserTable.add" v-permission="'permission:sysUser:create'">
          <template #icon>
            <IconPlus />
          </template>
          新建
        </a-button>
        <a-button class="removeBtn" @click="sysUserTable.batchDelete" v-permission="'permission:sysUser:batchDelete'">
          <template #icon>
            <IconDelete />
          </template>
          删除
        </a-button>
      </a-space>

      <a-table row-key="id" :data="sysUserTable.pageInfo.list"
               :row-selection="sysUserTable.rowSelection"
               v-model:selected-keys="sysUserTable.selectKeys" :pagination="false">
        <template #columns>
          <a-table-column data-index="id" title="ID" />
          <a-table-column data-index="username" title="用户名" />
          <a-table-column data-index="nickName" title="昵称" />
          <a-table-column data-index="age" title="年龄" />
          <a-table-column data-index="phone" title="手机号码" />
          <a-table-column data-index="createTime" title="创建时间" />
          <a-table-column title="操作" width="200">
            <template #cell="{record}">
              <a-space>
                <a-button @click="sysUserTable.edit(record)" type="text" v-permission="'permission:sysUser:update'">
                  <template #icon>
                    <IconEdit />
                  </template>
                  编辑
                </a-button>
                <a-button @click="sysUserTable.delete(record)" type="text" v-permission="'permission:sysUser:delete'"
                          class="text-danger">
                  <template #icon>
                    <IconDelete />
                  </template>
                  删除
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>

      <div class="d-flex justify-content-end mt-2">
        <a-pagination :total="sysUserTable.pageInfo.total" :page-size="sysUserTable.pageInfo.pageSize"
                      :current="sysUserTable.pageInfo.pageNum"
                      @change="sysUserTable.getList" class="mt-3"></a-pagination>
      </div>

      <a-modal :title="sysUserForm.formTitle" title-align="start"
               v-model:visible="sysUserForm.visible"
               :footer="null">
        <a-form ref="sysUserFormRef" :model="sysUserForm.form"
                @submit="sysUserForm.submitForm">

          <a-form-item field="username" hide-asterisk label="用户名"
                       :rules="[{ required: true,message: '用户名不能为空！' }]"
                       validate-trigger="blur">
            <a-input v-model="sysUserForm.form.username"></a-input>
          </a-form-item>
          <a-form-item field="password" hide-asterisk label="密码"
                       :rules="[{ required: true,message: '密码不能为空！' }]"
                       validate-trigger="blur">
            <a-input v-model="sysUserForm.form.password"></a-input>
          </a-form-item>
          <a-form-item field="nickName" hide-asterisk label="昵称"
                       :rules="[{ required: true,message: '昵称不能为空！' }]"
                       validate-trigger="blur">
            <a-input v-model="sysUserForm.form.nickName"></a-input>
          </a-form-item>
          <a-form-item field="age" hide-asterisk label="年龄" :rules="[{ required: true,message: '年龄不能为空！' }]"
                       validate-trigger="blur">
            <a-input-number v-model="sysUserForm.form.age" />

          </a-form-item>
          <a-form-item field="cardId" hide-asterisk label="身份证ID"
                       validate-trigger="blur">
            <a-input v-model="sysUserForm.form.cardId"></a-input>
          </a-form-item>
          <a-form-item field="addr" hide-asterisk label="地址"
                       validate-trigger="blur">
            <a-input v-model="sysUserForm.form.addr"></a-input>
          </a-form-item>
          <a-form-item field="phone" hide-asterisk label="手机号码"
                       :rules="[{ required: true,message: '手机号码不能为空！' }]"
                       validate-trigger="blur">
            <a-input v-model="sysUserForm.form.phone"></a-input>
          </a-form-item>
          <a-form-item field="role" hide-asterisk label="角色" :rules="[{ required: true,message: '角色不能为空！' }]"
                       validate-trigger="blur">
            <a-select v-model.number="sysUserForm.form.role">
              <a-option :label="v.key" :value="!isNaN(v.value) ? Number(v.value) : v.value" v-for="(v,i) in sysRoles" :key="i" />
            </a-select>

          </a-form-item>
          <a-form-item field="remark" hide-asterisk label="备注"
                       validate-trigger="blur">
            <a-input v-model="sysUserForm.form.remark"></a-input>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </a-layout-content>
</template>

<style scoped lang="scss">
</style>
